<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索添加部分 -->
        <el-form :inline="true" :model="subjectQuery" class="demo-form-inline">
          <el-form-item label="学科名称">
            <el-input v-model="subjectQuery.subjectName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clearCondition" class="smallBtn"
              >清除</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              @click="getSubjectList"
              class="smallBtn"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item class="addSubject">
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="subjectDialog = true"
              >新增学科
            </el-button>
          </el-form-item>
        </el-form>
        <el-alert
          :title="'数据一共' + subjectTotal + '条'"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
        <!-- 数据表格部分 -->
        <el-table :data="subjectList" style="width: 100%">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="140">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="140">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.addDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示">
            <template slot-scope="scope">
              <span>{{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column prop="address" label="操作" width="240">
            <template slot-scope="scope">
              <el-button type="text" @click="toSubClassification(scope.row)"
                >学科分类</el-button
              >
              <el-button type="text" @click="toSubjectTags(scope.row)"
                >学科标签</el-button
              >
              <el-button type="text" @click="toEditeSub(scope.row)"
                >修改</el-button
              >
              <el-button type="text" @click="deletSubject(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="subjectQuery.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="subjectQuery.pagesize"
          layout="prev, pager, next,sizes, jumper"
          background
          :total="subjectTotal"
        >
        </el-pagination>
      </el-card>
      <!-- 新增学科弹层 -->
      <el-dialog
        title="新增学科"
        :visible.sync="subjectDialog"
        width="30%"
        :before-close="SubjectClose"
      >
        <el-form
          ref="addSubjectForm"
          :rules="rules"
          :model="addSubject"
          label-width="80px"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="addSubject.subjectName"></el-input>
          </el-form-item>
        </el-form>
        <el-switch
          style="display: block"
          v-model="addSubject.isFrontDisplay"
          inactive-color="#ff4949"
          inactive-text="是否显示"
        >
        </el-switch>
        <span slot="footer" class="dialog-footer">
          <el-button type="" @click="CancelSubject" size="small"
            >取消</el-button
          >
          <el-button type="primary" @click="addsubHandel" size="small"
            >确定</el-button
          >
        </span>
      </el-dialog>
      <!-- 修改学科 -->
      <el-dialog
        title="修改学科"
        :visible.sync="editeSubjectDialog"
        width="30%"
        :before-close="editeSubjectClose"
      >
        <el-form
          ref="editeSubjectForm"
          :rules="rules"
          :model="editeSubject"
          label-width="80px"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="editeSubject.subjectName"></el-input>
          </el-form-item>
        </el-form>
        <el-switch
          style="display: block"
          v-model="editeSubject.isFrontDisplay"
          inactive-color="#ff4949"
          inactive-text="是否显示"
        >
        </el-switch>
        <span slot="footer" class="dialog-footer">
          <el-button type="" @click="CancelEditreSubject" size="small"
            >取消</el-button
          >
          <el-button type="primary" @click="EditeSubjectHandel" size="small"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  list as subjectList,
  add as addSubject,
  update as updataSubject,
  remove as removeSubject
} from '@/api/hmmm/subjects'
import { parseTime } from '@/utils/index'
export default {
  data() {
    return {
      // 学科列表查询条件
      subjectQuery: {
        // 当前页
        page: 1,
        // 每页显示条数
        pagesize: 10,
        // 学科名
        subjectName: ''
      },
      // 学科数据列表
      subjectList: [],
      // 学科总数
      subjectTotal: 0,
      // 控制新增学科弹层显示隐藏
      subjectDialog: false,
      // 新增学科内容
      addSubject: {
        subjectName: '',
        isFrontDisplay: true
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1到 20 个字符', trigger: 'blur' }
        ]
      },
      // 控制修改学科弹层显示隐藏
      editeSubjectDialog: false,
      // 修改学科数据
      editeSubject: {
        subjectName: '',
        isFrontDisplay: true,
        id: null
      }
    }
  },
  created() {
    this.getSubjectList()
  },
  methods: {
    async getSubjectList() {
      const data = await subjectList(this.subjectQuery)
      // console.log(data)
      if (data.status === 200) {
        this.subjectList = data.data.items
        this.subjectTotal = data.data.counts
      } else {
        this.$message.error('获取学科数据失败,请重试')
      }
    },
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.subjectQuery.page = newPage
      this.getSubjectList()
    },
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.subjectQuery.pagesize = newSize
      this.getSubjectList()
    },
    // 清除搜索条件
    clearCondition() {
      this.subjectQuery.subjectName = ''
      this.getSubjectList()
    },
    // 新增弹层关闭是的回调
    SubjectClose() {
      this.subjectDialog = false
    },
    // 新增弹层取消
    CancelSubject() {
      this.$refs.addSubjectForm.resetFields()
      this.subjectDialog = false
      this.addSubject.isFrontDisplay = true
    },
    // 确认添加学科
    addsubHandel() {
      // 表单校验
      this.$refs.addSubjectForm.validate(async valid => {
        if (!valid) {
          this.$message.error('学科名不能为空')
        } else {
          const data = await addSubject(this.addSubject)
          // console.log(data)
          if (data.status === 200) {
            // 添加成功
            this.getSubjectList()
          } else {
            this.$message.error('添加失败,请重新添加')
          }
        }
        this.addSubject.subjectName = ''
        this.subjectDialog = false
      })
    },
    // 关闭修改学科弹层回调
    editeSubjectClose() {
      this.editeSubjectDialog = false
    },
    // 取消修改学科
    CancelEditreSubject() {
      this.$refs.editeSubjectForm.resetFields()
      this.editeSubjectDialog = false
    },
    // 确认修改学科
    EditeSubjectHandel() {
      // 表单校验
      this.$refs.editeSubjectForm.validate(async valid => {
        if (!valid) {
          this.$message.error('学科名不能为空')
        } else {
          const data = await updataSubject(this.editeSubject)
          // console.log(data)
          if (data.status === 200) {
            // 添加成功
            this.getSubjectList()
            this.$message.success('修改成功')
          } else {
            this.$message.error('修改失败,请重试')
          }
          this.editeSubjectDialog = false
        }
      })
    },
    // 点击修改，执行函数
    toEditeSub(row) {
      // console.log(row)
      this.editeSubject.subjectName = row.subjectName
      this.editeSubject.id = row.id
      this.editeSubject.isFrontDisplay = row.isFrontDisplay === 1 ? true : false
      this.editeSubjectDialog = true
    },
    // 删除学科
    deletSubject(id) {
      // console.log(id)
      this.$confirm('此操作将删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeSubject({ id })
          this.getSubjectList()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 跳转到学科分类
    toSubClassification(row) {
      // console.log(row)
      this.$router.push({
        path: 'directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 跳转到学科标签
    toSubjectTags(row) {
      this.$router.push({
        path: 'tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    }
  },
  computed: {
    parseTime() {
      return parseTime
    }
  }
}
</script>

<style scoped lang="scss">
.addBtn {
  text-align: right;
}
// ::v-deep .el-input__inner {
//   width: 100%;
//   height: 32px;
// }
.smallBtn {
  height: 36px;
  line-height: 18px;
}
.addSubject {
  float: right;
}
.el-alert {
  margin-bottom: 16px;
}
.el-pagination {
  margin-top: 18px;
  text-align: right;
}
::v-deep .el-dialog__footer {
  text-align: right;
}
::v-deep .el-switch__label {
  font-weight: 700;
  margin-left: 10px;
}
</style>
